<%@ page import="hp.com.entity.Users" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
    String path = request.getContextPath();
    request.setAttribute("path",path);
    Users userSession =(Users) request.getSession().getAttribute("userSession");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link type="text/css" rel="stylesheet" href="<%=path%>/jbs/css/style.css" />
    <script type="text/javascript" src="${path}/jbs/js/jquery-1.11.1.min_044d0927.js"> </script>
    <script>
        //通过suk获取最新价格方法
    function checkSuk() {checkSuk
            console.log("triggered");
            let spanNode = document.getElementById("price");
            let suk = new Array();
            jq('input[name^="aName"]').each(function(index,item){
                if(item.checked){
                    suk.push(item.value);
                }
            });
            jq.ajax({
            url:"${path}/CheckSukPrice?",
            type:"post",
            data:"suk="+suk,//请求的数据格式
            dataType:"text",//返回的数据格式
            //请求前调用的函数
            beforeSend:function(){
            },
            //请求成功调用的函数
            success:function(result){
                spanNode.innerHTML="¥"+result;
            },
            //请求错误调用的函数
            error:function(){
            },
            complete:function (){
            }
            });
;        }
    //获取网页参数方法
    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }
    //添加到购物车方法
    function doAddCart(){
        let suk = new Array();
        jQuery('input[name^="aName"]').each(function(index,item){
            if(item.checked){
                suk.push(item.value);
                console.log("suk is now:"+suk);
            }

        });
        let itemId = getQueryVariable("id");
        let amount = document.getElementById("itemAmount").value;
        jQuery.ajax({
            url:"${path}/AddToCart?id="+itemId+"&&suk="+suk+"&&amount="+amount,
            type:"post",
            data: {"id":itemId,"suk":suk,"amount":amount},
            dataType: "text",
            beforeStart(){},
            success(result){
               if(result=="success"){
                ShowDiv_1('MyDiv1','fade1')}else{
                   window.location.href="easybuy/Login.jsp"
               }
            }, complete(){},
        })
        //window.location.href="/AddToCart?id="+itemId+"&&suk="+suk+"&&amount="+amount;
    }
    //商品数量增加
        function addUpdate(jia){
            var c = jia.parent().find(".n_ipt").val();
            c=parseInt(c)+1;
            jia.parent().find(".n_ipt").val(c);
        }
        //商品数量减少
        function jianUpdate(jian){
            var c = jian.parent().find(".n_ipt").val();
            if(c==1){
                c=1;
            }else{
                c=parseInt(c)-1;
                jian.parent().find(".n_ipt").val(c);
            }
        }
    </script>
    <script type="text/javascript" src="<%=path%>/jbs/js/menu.js"></script>
	<script type="text/javascript" src="<%=path%>/jbs/js/lrscroll_1.js"></script>
	<script type="text/javascript" src="<%=path%>/jbs/js/n_nav.js"></script>
    <link rel="stylesheet" type="text/css" href="<%=path%>/jbs/css/ShopShow.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/jbs/css/MagicZoom.css" />
    <script type="text/javascript" src="<%=path%>/jbs/js/MagicZoom.js"></script>
    <style>
        #price{
            font-size: 35px;font-weight: bold;
        }
    </style>
    <script type="text/javascript" src="<%=path%>/jbs/js/p_tab.js"></script>
    <script type="text/javascript" src="<%=path%>/jbs/js/shade.js"></script>
    <link rel="icon" href="<%=path%>/jbs/images/ico.ico" type="image/x-icon">
<title>${requestScope.product.easyName}-青鸟优选</title>
</head>
<body style="background-color: #f9f9f9">
<!--Begin Header Begin-->
<div class="soubg">
    <div class="sou">
        <span class="fr">
        	<span class="fl">
                <c:choose>
                    <c:when test="<%= userSession == null%>">
                        <a href="${path}/jbs/Regist.jsp" style="color:#02A4F8;">免费注册</a>&nbsp;|&nbsp;
                         <a href="${path}/jbs/Login.jsp" style="color:#02A4F8;">马上登录</a>
                    </c:when>
                    <c:otherwise>
                        <%=userSession.getLoginname()%> |&nbsp;<a href="${path}/User">个人中心</a> | <a href="${path}/Orders">我的订单</a> |
                        <a href="${path}/Cart#showCart">购物车</a>
                    </c:otherwise>
                </c:choose>&nbsp;
            </span>
        </span>
    </div>
</div>
<div class="top">
    <div class="logo"><a href="<%=path%>/Index"><img src="<%=path%>/jbs/images/logo.png" /></a></div>
    <div class="search">
    	<form>
        	<input type="text" value="" class="s_ipt" />
            <input type="submit" value="搜索" class="s_btn" />
        </form>
    </div>
    <div class="i_car">
        <a href="${path}/Cart"><div class="car_t">购物车</div></a>
        <%--        <div class="car_bg">--%>
        <%--       		<!--Begin 购物车未登录 Begin-->--%>
        <%--            <div class="un_login">--%>
        <%--                <c:choose>--%>
        <%--                    <c:when test="<%= userSession == null%>">--%>
        <%--                         <a href="${path}/jbs/Login.jsp" style="color:#02A4F8;">马上登录</a>--%>
        <%--                    </c:when>--%>
        <%--                    <c:otherwise>--%>
        <%--                        <a href="${path}/User"><%=userSession.getLoginname()%></a>--%>
        <%--                    </c:otherwise>--%>
        <%--                </c:choose>--%>
        <%--                <a href="${path}/Cart">查看购物车！</a>--%>
        <%--            </div>--%>
        <%--        </div>--%>
    </div>
</div>
<!--End Header End--> 
<!--Begin Menu Begin-->
<div class="menu_bg">
	<div class="menu">
    	<ul class="menu_r">
            <li><a href="${path}/AllProducts?pageNo=1" >全部</a></li>
            <li><a href="${path}/Types?category=14&pageNo=1" id="m0">学习</a></li>
            <li ><a href="${path}/Types?category=1&pageNo=1" id="m1">食品</a></li>
            <li ><a href="${path}/Types?category=2&pageNo=1"id="m2">化妆品</a></li>
            <li ><a href="${path}/Types?category=3&pageNo=1"id="m3">服装</a></li>
            <li ><a href="${path}/Types?category=4&pageNo=1"id="m4">家居</a></li>
            <li ><a href="${path}/Types?category=5&pageNo=1"id="m5">数码产品</a></li>
        </ul>
    </div>
</div>
<!--End Menu End--> 
<div class="i_bg" style="margin-top: 70px;">
    <div class="content" style="margin-top: 50px;width:950px;margin:auto;">
    	                    
        <div id="tsShopContainer">
            <div id="tsImgS"><a href="${requestScope.mainPics[0]}" title="Images" class="MagicZoom" id="MagicZoom"><img src="${requestScope.mainPics[0]}" width="390" height="390" /></a></div>
            <div id="tsPicContainer">
                <div id="tsImgSCon">
                    <ul>
                        <li onclick="showPic(0)" rel="MagicZoom" class="tsSelectImg"><img src="${requestScope.mainPics[0]}" tsImgS="${requestScope.mainPics[0]}" width="79" height="79" /></li>
                        <li onclick="showPic(1)" rel="MagicZoom"><img src="${requestScope.mainPics[1]}" tsImgS="${requestScope.mainPics[1]}" width="79" height="79" /></li>
                        <li onclick="showPic(2)" rel="MagicZoom"><img src="${requestScope.mainPics[2]}" tsImgS="${requestScope.mainPics[2]}" width="79" height="79" /></li>
                        <li onclick="showPic(3)" rel="MagicZoom"><img src="${requestScope.mainPics[3]}" tsImgS="${requestScope.mainPics[3]}" width="79" height="79" /></li>
                        <li onclick="showPic(4)" rel="MagicZoom"><img src="${requestScope.mainPics[0]}" tsImgS="${requestScope.mainPics[0]}" width="79" height="79" /></li>
                        <li onclick="showPic(5)" rel="MagicZoom"><img src="${requestScope.mainPics[1]}" tsImgS="${requestScope.mainPics[1]}" width="79" height="79" /></li>
                        <li onclick="showPic(6)" rel="MagicZoom"><img src="${requestScope.mainPics[2]}" tsImgS="${requestScope.mainPics[2]}" width="79" height="79" /></li>
                        <li onclick="showPic(7)" rel="MagicZoom"><img src="${requestScope.mainPics[3]}" tsImgS="${requestScope.mainPics[3]}" width="79" height="79" /></li>
                    </ul>
                </div>
            </div>
            <img class="MagicZoomLoading" width="16" height="16" src="<%=path%>/jbs/images/loading.gif" alt="Loading..." />
        </div>
        
        <div class="pro_des">
        	<div class="des_name">
            	<p>${requestScope.product.pname}</p>
                <p style="font-size: 16px;color: #888888">${requestScope.product.description}</p>
            </div>
            <div class="des_price">
            	价格：<b id="price">${requestScope.defaultPrice}</b><br />
            </div>
            <ul>
                <style>
                    .des_choice .fl input[type=checkbox]:checked +.checkimg{
                        display: block;
                    }
                </style>
                <style>
                    .labl {
                        display : inline;
                        width: 400px;
                    }
                    .labl > input{ /* HIDE RADIO */
                        visibility: hidden; /* Makes input not-clickable */
                        position: absolute; /* Remove input from document flow */
                    }
                    .labl > input + div{ /* DIV STYLES */
                        cursor:pointer;
                        padding:0px 10px;
                    }
                    .labl > input:checked ~ div:nth-of-type(1){ /* (RADIO CHECKED) DIV STYLES */
                        border:2px solid #02A4F8;display: block;
                    }
                    .labl > input:checked ~ div:nth-of-type(2){ /* (RADIO CHECKED) DIV STYLES */
                        display: block;
                    }
                </style>
                <c:forEach items="${requestScope.optionList}" begin="0" end="${fn:length(requestScope.optionList)}" varStatus="s" var="suk" >

                    <li class="des_choice">
                        <ul>
                            <span class="fl">${suk.attr}</span>

                            <c:forEach items="${suk.prop}" var="map"  varStatus="i" begin="0" end="${fn:length(suk.prop)}">
                             <li>
                                   <label class="labl">
                                       <input type="radio" onclick="()" style="display: flex" name="aName_${suk.attr}"id="aId_${s.index}_${i.index}" value="${map.key}"<c:if test="${i.index==0}">checked="checked"</c:if> />
                                       <div>${map.value}</div>
                                       <div class="ch_img"></div>
                                   </label>
                            </li>
                           </c:forEach>
                        </ul>
                    </li>
                </c:forEach>
            </ul>


            <div class="des_join"style="margin-top: 100px">
            	<div class="j_nums">
                	<input type="text" value="1" name="" id="itemAmount" class="n_ipt" />
                    <input type="button" value="" onclick="addUpdate(jq(this));" class="n_btn_1" />
                    <input type="button" value="" onclick="jianUpdate(jq(this));" class="n_btn_2" />   
                </div>
                <span class="fl"><a onclick="doAddCart()"><img  src="<%=path%>/jbs/images/j_car.png" /></a></span>
            </div>            
        </div>
    </div>
    <div class="content mar_20">
        <div class="l_list" style="float: none;margin: auto;">
            <div class="des_border">
                <div class="des_tit">
                	<ul>
                    	<li class="current"><a href="#p_attribute">商品属性</a></li>
                        <li><a href="#p_details">商品详情</a></li>
                    </ul>
                </div>
                <div class="des_con" id="p_attribute">
                	<table border="0" align="center" style="width:100%; font-family:'宋体'; margin:10px auto;" cellspacing="0" cellpadding="0" id="detailsTable">
<%--                        <tr>--%>
<%--                            <td>--%>
<%--                                <c:forEach items="${requestScope.goodDetail}" var="d" varStatus="g">--%>
<%--                                    ${d}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--%>
<%--                                    <c:if test="${g.count %3==0}">--%>
<%--                            </td>--%>
<%--                        </tr>--%>
<%--                        --%>
<%--                        <tr>--%>
<%--                            <td>--%>
<%--                                    </c:if>--%>

<%--                                </c:forEach>--%>
<%--                            </td>--%>
<%--                        </tr>--%>
    <style>
        #detailsTable{
            margin: 40px auto !important;
        }
        #detailsTable tr>td{
            padding-left: 30px;
        }
    </style>
                        <c:forEach items="${requestScope.goodDetail}" var="d" varStatus="a" step="3" begin="0" end="${fn:length(requestScope.goodDetail)}">
                            <c:choose>
                                <c:when test="${fn:length(requestScope.goodDetail)-a.index==0}">
                                    <tr>
                                        <td>${d}</td>
                                    </tr>
                                </c:when>
                                <c:when test="${fn:length(requestScope.goodDetail)-a.index==1}">
                                    <tr>
                                        <td>${requestScope.goodDetail[a.index]}</td>
                                        <td>${requestScope.goodDetail[a.index+1]}</td>
                                    </tr>
                                </c:when>
                                <c:otherwise>
                                    <tr>
                                        <td>${requestScope.goodDetail[a.index]}</td>
                                        <td>${requestScope.goodDetail[a.index+1]}</td>
                                        <td>${requestScope.goodDetail[a.index+2]}</td>
                                    </tr>
                                        </c:otherwise>
                            </c:choose>
                        </c:forEach>
                    </table>
                </div>
          	</div>  
            
            <div class="des_border" id="p_details">
                <div class="des_t">商品详情</div>
                <div class="des_con">
                    <p align="center">
                        <c:forEach items="${requestScope.picDetail}" var="v">
                            <img src="${v}" style="width: 970px;" />
                        </c:forEach>
					</p>
                    
                </div>
          	</div>  
            <%--商品评论--%>
            <%--<div class="des_border" id="p_comment">
            	<div class="des_t">商品评论</div>
                
                <table border="0" class="jud_tab" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="175" class="jud_per">
                    	<p>80.0%</p>好评度
                    </td>
                    <td width="300">
                    	<table border="0" style="width:100%;" cellspacing="0" cellpadding="0">
                          <tr>
                            <td width="90">好评<font color="#999999">（80%）</font></td>
                            <td><img src="images/pl.gif" align="absmiddle" /></td>
                          </tr>
                          <tr>
                            <td>中评<font color="#999999">（20%）</font></td>
                            <td><img src="images/pl.gif" align="absmiddle" /></td>
                          </tr>
                          <tr>
                            <td>差评<font color="#999999">（0%）</font></td>
                            <td><img src="images/pl.gif" align="absmiddle" /></td>
                          </tr>
                        </table>
                    </td>
                    <td width="185" class="jud_bg">
                    	购买过雅诗兰黛第六代特润精华露50ml的顾客，在收到商品才可以对该商品发表评论
                    </td>
                    <td class="jud_bg">您可对已购买商品进行评价<br /><a href="#"><img src="images/btn_jud.gif" /></a></td>
                  </tr>
                </table>
                
                
                				
                <table border="0" class="jud_list" style="width:100%; margin-top:30px;" cellspacing="0" cellpadding="0">
                  <tr valign="top">
                    <td width="160"><img src="images/peo1.jpg" width="20" height="20" align="absmiddle" />&nbsp;向死而生</td>
                    <td width="180">
                    	颜色分类：<font color="#999999">粉色</font> <br />
                        型号：<font color="#999999">50ml</font>
                    </td>
                    <td>
                    	产品很好，香味很喜欢，必须给赞。 <br />
                        <font color="#999999">2015-09-24</font>
                    </td>
                  </tr>
                  <tr valign="top">
                    <td width="160"><img src="images/peo2.jpg" width="20" height="20" align="absmiddle" />&nbsp;就是这么想的</td>
                    <td width="180">
                    	颜色分类：<font color="#999999">粉色</font> <br />
                        型号：<font color="#999999">50ml</font>
                    </td>
                    <td>
                    	送朋友，她很喜欢，大爱。 <br />
                        <font color="#999999">2015-09-24</font>
                    </td>
                  </tr>
                  <tr valign="top">
                    <td width="160"><img src="images/peo3.jpg" width="20" height="20" align="absmiddle" />&nbsp;墨镜墨镜</td>
                    <td width="180">
                    	颜色分类：<font color="#999999">粉色</font> <br />
                        型号：<font color="#999999">50ml</font>
                    </td>
                    <td>
                    	大家都说不错<br />
                        <font color="#999999">2015-09-24</font>
                    </td>
                  </tr>
                  <tr valign="top">
                    <td width="160"><img src="images/peo4.jpg" width="20" height="20" align="absmiddle" />&nbsp;那*****洋 <br /><font color="#999999">（匿名用户）</font></td>
                    <td width="180">
                    	颜色分类：<font color="#999999">粉色</font> <br />
                        型号：<font color="#999999">50ml</font>
                    </td>
                    <td>
                    	下次还会来买，推荐。<br />
                        <font color="#999999">2015-09-24</font>
                    </td>
                  </tr>
                </table>

                	
                    
                <div class="pages">
                    <a href="#" class="p_pre">上一页</a><a href="#" class="cur">1</a><a href="#">2</a><a href="#">3</a>...<a href="#">20</a><a href="#" class="p_pre">下一页</a>
                </div>
                
          	</div>--%>
            
            
        </div>
    </div>
    
    
    <!--Begin 弹出层-收藏成功 Begin-->
    <div id="fade" class="black_overlay"></div>
    <div id="MyDiv" class="white_content">             
        <div class="white_d">
            <div class="notice_t">
                <span class="fr" style="margin-top:10px; cursor:pointer;" onclick="CloseDiv('MyDiv1','fade1')"><img src="${path}/jbs/images/close.gif" /></span>
            </div>
            <div class="notice_c">
           		
                <table border="0" align="center" style="margin-top:;" cellspacing="0" cellpadding="0">
                  <tr valign="top">
                    <td width="40"><img src="${path}/jbs/images/suc.png" /></td>
                    <td>
                    	<span style="color:#3e3e3e; font-size:18px; font-weight:bold;">您已成功收藏该商品</span><br />
                    	<a href="#">查看我的关注 >></a>
                    </td>
                  </tr>
                  <tr height="50" valign="bottom">
                  	<td>&nbsp;</td>
                    <td><a href="#" class="b_sure">确定</a></td>
                  </tr>
                </table>
                    
            </div>
        </div>
    </div>    
    <!--End 弹出层-收藏成功 End-->
    
    
    <!--Begin 弹出层-加入购物车 Begin-->
    <div id="fade1" class="black_overlay"></div>
    <div id="MyDiv1" class="white_content">             
        <div class="white_d">
            <div class="notice_t">
                <span class="fr" style="margin-top:10px; cursor:pointer;" onclick="CloseDiv_1('MyDiv1','fade1')"><img src="${path}/jbs/images/close.gif" /></span>
            </div>
            <div class="notice_c">
           		
                <table border="0" align="center" style="margin-top:;" cellspacing="0" cellpadding="0">
                  <tr valign="top">
                    <td width="40"><img src="${path}/jbs/images/suc.png" /></td>
                    <td>
                    	<span style="color:#3e3e3e; font-size:18px; font-weight:bold;">宝贝已成功添加到购物车</span><br />
                    </td>
                  </tr>
                  <tr height="50" valign="bottom">
                    <td colspan="2"><a href="${path}/Cart#showCart" class="button_rc" style="float: left" >去购物车结算</a><a href="#" class="button_r" onclick="CloseDiv_1('MyDiv1','fade1')" style="float: right">继续购物</a></td>
                  </tr>
                </table>
                    
            </div>
        </div>
    </div>    
    <!--End 弹出层-加入购物车 End-->
    <!--Begin Footer Begin -->
    <div class="b_btm_bg bg_color">
        <div class="b_btm">
            <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;" cellspacing="0" cellpadding="0">
              <tr>
                <td width="72"><img src="<%=path%>/jbs/images/b1.png" width="62" height="62" /></td>
                <td><h2>正品保障</h2>正品行货  放心购买</td>
              </tr>
            </table>
			<table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;" cellspacing="0" cellpadding="0">
              <tr>
                <td width="72"><img src="<%=path%>/jbs/images/b2.png" width="62" height="62" /></td>
                <td><h2>满38包邮</h2>满38包邮 免运费</td>
              </tr>
            </table>
            <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;" cellspacing="0" cellpadding="0">
              <tr>
                <td width="72"><img src="<%=path%>/jbs/images/b3.png" width="62" height="62" /></td>
                <td><h2>天天低价</h2>天天低价 畅选无忧</td>
              </tr>
            </table>
            <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;" cellspacing="0" cellpadding="0">
              <tr>
                <td width="72"><img src="<%=path%>/jbs/images/b4.png" width="62" height="62" /></td>
                <td><h2>准时送达</h2>收货时间由你做主</td>
              </tr>
            </table>
        </div>
    </div>
    <div class="btmbg">
        <div class="btm">
            <a href="https://beian.miit.gov.cn">备案/许可证编号：鄂ICP备20008779号-1</a> <br />本站仅供个人学习实践，无实际购买功能
        </div>
    </div>
    <!--End Footer End -->    
</div>

</body>
<script src="<%=path%>/jbs/js/ShopShow.js"></script>

</html>
